import { Layout as AntLayout, Menu, Typography } from 'antd'
import { Link, Outlet } from 'react-router-dom'
import { ExperimentOutlined } from '@ant-design/icons'

const { Header: AntHeader, Content } = AntLayout
const { Title } = Typography

const Header = () => {
  const menuItems = [
    {
      key: 'home',
      label: <Link to="/">Home</Link>,
    },
    {
      key: 'practice',
      label: <Link to="/practice">Practice</Link>,
    },
  ]

  return (
    <AntLayout className="min-h-screen">
      <AntHeader className="bg-white px-4 flex items-center justify-between border-b">
        <Link to="/" className="flex items-center gap-2 hover:text-current">
          <ExperimentOutlined className="text-2xl text-blue-500" />
          <Title level={4} className="!m-0 bg-gradient-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent">
            myReact
          </Title>
        </Link>
        <Menu mode="horizontal" className="flex-1 justify-end border-0" items={menuItems} />
      </AntHeader>
      <Content className="p-6">
        <Outlet />
      </Content>
    </AntLayout>
  )
}

export default Header 